<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="{{rootUrl}}global/css/templatemo_style.css" media="screen" />

        <link rel="stylesheet" type="text/css" href="{{rootUrl}}global/css/screen.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="{{rootUrl}}global/css/lrtk.css" media="screen" />


        <script src="{{rootUrl}}global/js/jquery-1.4.1.min.js" type="text/javascript"></script>	
        <style type="text/css">
            .hidden{display: none}
            #big_play_prev {
                BACKGROUND-IMAGE: url({{rootUrl}}images/leftbig.png); WIDTH: 35px; DISPLAY: block; HEIGHT: 51px; _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='../images/leftbig.png')
            }
            #big_play_next {
                BACKGROUND-IMAGE: url({{rootUrl}}images/rightbig.png); WIDTH: 35px; DISPLAY: block; HEIGHT: 51px; _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='../images/rightbig.png')
            }

        </style>
        <title>Figuratively&Speaking</title>
    </head>
    <body>
        <div id="wrapper">
            <!-- include 'header' -->
            <!--            <div id="header">
                            <div id="logo">
                                <h1><a href="index.html">Figuratively<span>&amp;</span>Speaking</a></h1>
                            </div>
                            <div class="clr"></div>
                        </div>-->
            <div class="content">
                <!-- include 'menu' -->
                <!--                <ul id="menu">
                                    <li><a class="current" href="javascript:;">Home</a></li>
                                    <li><a href="javascript:;">INTORDUCTION</a></li>
                                    <li><a href="javascript:;">PICTURE</a></li>
                                    <li><a href="javascript:;">MODEL</a></li>
                                    <li><a href="javascript:;">FOMUM</a></li>
                                    <li><a href="javascript:;">PURCHASE</a></li>
                                    <li><a href="{{rootUrl}}admin" id="login">ADMIN</a></li>
                                </ul>-->
                <!--                <div id="pitch">
                                    <h1>Sed at elit non est auctor lobortis sed nec<br />
                                        Vivamus nec odio eget lacus semper</h1>
                                    <p><em>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut enim risus, rhoncus sit amet ultricies vel, aliquet ut dolor. Duis iaculis urna vel massa ultricies suscipit.</em></p>
                                </div>-->



                <!-- 显示表单部分 -->
                <div style="margin:15px auto;">
                    <div style="HEIGHT: 560px; PADDING-TOP: 20px" class="wrap" ><!--大图轮换区-->
                        <div id="picarea" style="background:none">





                            <div style="MARGIN: 0px auto; WIDTH: 774px; HEIGHT: 436px; OVERFLOW: hidden"  id="big_change">





                                <div style="MARGIN: 0px auto; WIDTH: 774px; HEIGHT: 436px; OVERFLOW: hidden" id="bigpicarea">
                                    <p class="bigbtnPrev"><span id="big_play_prev"></span></p>



                                    <!-- loop list -->
                                    <div id="image_xixi-{{list' v.@photoid}}" class="image" style="display: block; opacity: 1; ">
                                                    <div class="word" style=" ">
                                                        <h2 style="padding:0px;margin:0px;">{{list' v.@custom_name}}</h2></div>
                                                    <a name="{{rootUrl}}upload/{{list' v.@name}}"  href="{{rootUrl}}image/info?id={{list' v.@photoid}}"target="_blank">
                                                        <img alt="" src="{{rootUrl}}process/{{list' v.@name}}_middle.jpg" ></a> 

                                                </div>
                                                <!-- endloop -->

                                                <p class="bigbtnNext"><span id="big_play_next"></span></p></div>



                                </div>
                                <div id="smallpicarea" style="overflow:hidden">
                                    <div id="thumbs">
                                        <ul>
                                            <li class="first btnPrev"><img id="play_prev" src="{{rootUrl}}images/left.png"></li>


                                            <!-- loop list -->
                                            <li class="slideshowItem">

                                                <a id="thumb_xixi-{{list' v.@photoid}}" href="#" class=""><img src="{{rootUrl}}{{list' v.@thumb_name}}" width="90" height="60"></a>

                                            </li>


                                            <!-- endloop -->

                                            <!-- <li class="last_img slideshowItem">
                                             <a id="thumb_xixi-07" href="#" class=""><img src="images/42766298.jpg" width="90" height="60"></a>
                                             </li>  -->
                                            <li class="last btnNext"><img id="play_next" src="{{rootUrl}}images/right.png"></li>
                                    </ul></div></div></div>
                        <script>
    
    
                            var target = [];
                            var thumb_target = [];
                            $.each($('.slideshowItem'),function(k,v){
   
                                var id = $(v).find('a').attr('id').split('_')[1];
                                target.push(id);   
                                thumb_target.push( '#'+$(v).find('a').attr('id'));
       
                            })
                            var count = target.length;


                        </script>
                    </div>
                </div>
                <!-- 显示表单结束 -->




                <!-- include 'footer' -->


                <!--                <div id="footer">
                                    <p id="links">
                                        <a href="#">Privacy Policy</a>
                                        <a href="#">Terms of Use</a>
                                    </p>
                                    <p>
                                        <a href="#">Home</a>
                                        <a href="#">Practice</a>
                                        <a href="#">Attorneys</a>
                                        <a href="#">Accidents</a>
                                        <a href="#">News</a>
                                        <a href="#">About Us</a>
                                        <a href="#">Contact Us</a>
                                    </p>
                                    <p>Copyright &copy; 2010 &minus; Lawyer&amp;Attorney &middot; Design: Luka Cvrk, <a href="http://www.cssmoban.com" title="Free CSS Templates">cssMoban.com</a> &not; <a href="http://www.lawyermarketinggroup.com/">Law Firm Marketing</a></p>
                                </div>-->
            </div>
    </body>
</html>


<script type="text/javascript">
    $('#menu a').click(function(){
        $('#menu a').removeClass('current');
        $(this).addClass('current');
    })
    $('.bigbtnPrev,.bigbtnNext').hide();
    $('#big_change').mouseout(function(){
          $('.bigbtnPrev,.bigbtnNext').hide();
      }).mouseover(function(){
          $('.bigbtnPrev,.bigbtnNext').show();
      })
    
    var timer = null;
    var offset = 5000;

    var image_index = $.inArray('#thumb_xixi-{{imageid}}',thumb_target);


    var index = image_index;
    var first=Math.floor(index/7)*7;
    var last = first+6;
    $(function(){    
   
        $('div.word').css({opacity: 0.85});
 
        hookThumb(); 
        hookBtn();
        bighookBtn();
        rechange(index);
        slideImage(index);
        $(  thumb_target.join()).parent().hide();
        $(   thumb_target.slice(first,last+1).join()).parent().show();
    
    });
    function auto(index,count){
        index++;
        if (index > count){
            index = 0;
        }
        rechange(index);
        slideImage(index);
        // timer = window.setTimeout(auto, offset);
    }
    //大图交替轮换
    function slideImage(i){
        var id = 'image_'+ target[i];
        $('#'+ id)
        .animate({opacity: 1}, 800, function(){
            $(this).find('.word').animate({height: 'show'}, 'slow');
        }).show()
        .siblings(':visible')
        .find('.word').animate({height: 'hide'},'fast',function(){
            $(this).parent().animate({opacity: 0}, 800).hide();
        });
    }

  

    function checkMove(i,count){

        if(i==0||i==count||first<=i&&last>=i)
            return;
        $(  thumb_target.join()).parent().hide();
        if(i<first){
            var target_center =   thumb_target.slice(i-6,i+1);
            last = i;
            first = i-6;
        }else if(i>last){
         
         
            var target_center =  thumb_target.slice(i,count);
            last = i+6;
            first = i;
        }
        
        $( target_center.join()).parent().show();
        /*
    if(i==first||i==last){
           if(i+1%7==0){
        if(i+6<count){
            
        }else{ //大于count的
         
            var target_left =  target.splice(0,i);
              var target_center =  target.splice(i,i+7);
               var target_right =  target.splice(i+7,count);
                 $( target_left.join()).hide();
                  $( target_center.join()).show();
                      $( target_right.join()).hide();
        }
    }
        
        
    } */
 
    
    }
    //bind thumb a
    function hookThumb(){    
        $('#thumbs li a')
        .bind('click', function(){
            if (timer) {
                clearTimeout(timer);
            }                
            var id = this.id;            
            index = getIndex(id.substr(6));
            rechange(index);
            slideImage(index); 
            timer = window.setTimeout(auto, offset);  
            this.blur();            
            return false;
        });
    }
    //bind next/prev img
    function hookBtn(){
        $('#thumbs li img').filter('#play_prev,#play_next')
        .bind('click', function(){
         
            var id = this.id;
            if (id == 'play_prev') {
                if(first-1<0){
                    return;
                }else{
                    checkMove(first-1,count);
                }
            }else{
                if(last+1>count-1){
                    return;
                }else{
                    checkMove(last+1,count);
                }
            }
        
        });
    }

    function bighookBtn(){
        $('#bigpicarea p span').filter('#big_play_prev,#big_play_next')
        .bind('click', function(){
          
   
            var id = this.id;
            if (id == 'big_play_prev') {
                if(index-1<0){
                    return;
                }else{
                    //  checkMove(first-1,count);
                    index--;
                }
                  
                
            
                //    first--;
                // if (first < 0) return;//index = count-1;
            }else{
                if(index+1>count-1){
                    return;
                }else{
                   
                    index++;
                }
                    
       
            }
            rechange(index);
            slideImage(index);
            checkMove(index,count);
          
         
            //  timer = window.setTimeout(auto, offset);
        });
    }

    //get index
    function getIndex(v){
        for(var i=0; i < target.length; i++){
            if (target[i] == v) return i;
        }
    }
    function rechange(loop){
        var id = 'thumb_'+ target[loop];
        $('#thumbs li a.current').removeClass('current');
        $('#'+ id).addClass('current');
    }

    /*  |xGv00|d7b30c0224cec55b59311c4f2af116f7 */
    
</script>


